document.writeln("        <div class=\'reviews\' onclick=\'handleOpenReviewsPanel()\'>★ REVIEWS</div>");
document.writeln("        <div class=\'reviews_panel\' id=\'reviews_panel\' onclick=\'handleCloseReviewsPanel()\'>");
document.writeln("            <div class=\'shoppers_reviews\'>");
document.writeln("                <div class=\'title\'>");
document.writeln("                    <p>");
document.writeln("                        These are real reviews <br/>");
document.writeln("                        from real shoppers");
document.writeln("                    </p>");
document.writeln("                </div>");
document.writeln("                <button></button>");
document.writeln("            </div>");
document.writeln("        </div>");
document.writeln("");
document.writeln("        <div class=\'header\'>");
document.writeln("            <div class=\'news\' id=\'news\'>");
document.writeln("                <div class=\'container clear_float\' id=\'news_container\'>");
document.writeln("                    <div class=\'content\' id=\'news_content_0\'>");
document.writeln("                        <a href=\'#\'>FREE SHIPPING + RETURNS + EXCHANGES IN THE U.S.</a>");
document.writeln("                    </div>");
document.writeln("                    <div class=\'content\' id=\'news_content_1\'>");
document.writeln("                        <a href=\'#\'>3 FREE MASKS WITH ALL ORDERS OVER $100</a>");
document.writeln("                    </div>");
document.writeln("                    <div class=\'content\' id=\'news_content_2\'>");
document.writeln("                        <a href=\'#\'>GIFT WRAPPING AVAILABLE AT CHECKOUT</a>");
document.writeln("                    </div>");
document.writeln("                    <div class=\'content\' id=\'news_content_3\'>");
document.writeln("                        <a href=\'#\'>develop by group 7</a>");
document.writeln("                    </div>");
document.writeln("                </div>");
document.writeln("            </div>");
document.writeln("        </div>");
document.writeln("        <div class=\'nav\'>");
document.writeln("            <div class=\'content\'>");
document.writeln("                <a href=\'index.html\' class=\'logo\'>");
document.writeln("                    <img src=\'../resource/images/index_logo.webp\' alt=\'\'>");
document.writeln("                </a>");
document.writeln("                <ul class=\'clear_float\'>");
document.writeln("                    <li><a href=\'#\'>NEW</a> <div class=\'border\'></div></li>");
document.writeln("                    <li>");
document.writeln("                        <a href=\'#\'>");
document.writeln("                            COLLECTION");
document.writeln("                            <div class=\'border\'></div>");
document.writeln("                        </a>");
document.writeln("                        <div class=\'details\'></div>");
document.writeln("                    </li>");
document.writeln("                    <li><a href=\'#\'>SHIRTS</a> <div class=\'border\'></div></li>");
document.writeln("                    <li><a href=\'#\'>POLOS+TEES</a> <div class=\'border\'></div></li>");
document.writeln("                    <li><a href=\'#\'>SHORTS</a> <div class=\'border\'></div></li>");
document.writeln("                    <li><a href=\'#\'>PANTS</a> <div class=\'border\'></div></li>");
document.writeln("                    <li><a href=\'#\'>LAYERS</a> <div class=\'border\'></div></li>");
document.writeln("                    <li><a href=\'#\'>ACCESSORIES</a> <div class=\'border\'></div></li>");
document.writeln("                    <li><a href=\'#\'>SALE</a> <div class=\'border\'></div></li>");
document.writeln("                </ul>");
document.writeln("");
document.writeln("                <div class=\'cart\'>");
document.writeln("                    <a href=\'cart.html\'>Cart()</a>");
document.writeln("                </div>");
document.writeln("");
document.writeln("                <div class=\'cart_panel\'></div>");
document.writeln("");
document.writeln("                <div class=\'search\' onclick=\'handleOpenSearchPanel()\'>");
document.writeln("                    <span>Search</span>");
document.writeln("                    <img src=\'../resource/images/search.png\' alt=\'\'>");
document.writeln("                </div>");
document.writeln("");
document.writeln("                <div class=\'search_panel\' id=\'search_panel\'>");
document.writeln("                    <div class=\'clear_float\'>");
document.writeln("                        <div style=\'float: left;width: 100%;\'>");
document.writeln("                            <div style=\'margin-right: 42px\'>");
document.writeln("                                <input type=\'text\' placeholder=\'Search...\'>");
document.writeln("                            </div>");
document.writeln("                        </div>");
document.writeln("");
document.writeln("                        <button id=\'close_search_panel\' onclick=\'handleCloseSearchPanel()\'>");
document.writeln("                            <img src=\'../resource/images/cross.png\' alt=\'\'>");
document.writeln("                        </button>");
document.writeln("                    </div>");
document.writeln("                </div>");
document.writeln("            </div>");
document.writeln("        </div>");



let newsInterval;
let newsItems = [];
let newsScroll;
{
    function getNewsWidth() {
        let width = window.getComputedStyle(document.getElementById("news")).width;
        return  new Number(width.substr(0, width.indexOf("px")));
    }

    {
        let counter = 1;
        let width = getNewsWidth();
        let childNodes = document.getElementById("news_container").childNodes;
        for (let i in childNodes) {
            let temp = childNodes[i];
            if ("DIV" == temp.nodeName && temp.className.indexOf("content") != -1) {
                temp.style.zIndex = counter + "";
                temp.addEventListener('transitionend', handleScrollAnimeEnd, false);
                newsItems.push(
                    {
                        item: temp,
                        number: counter++,
                        coordinate: -width,
                        reset: false
                    }
                );
            }
        }
    }

    newsScroll = function () {
        for (let i in newsItems) {
            let temp = newsItems[i];
            temp.item.style.left = temp.coordinate + "px";
        }
    }

    function handleScrollAnimeEnd(e) {
        let width = getNewsWidth();
        let cId = e.target.id;
        let temp = newsItems[new Number(cId.substr(cId.lastIndexOf("_") + 1,cId.length))];
        switch (temp.number) {
            case 1:
                if (temp.coordinate <= -(width * 2)) {//动态布局不能使用==作为判断
                    temp.coordinate = width;
                    temp.reset = true;
                }else{
                    if (temp.reset) {
                        temp.item.style.zIndex = (new Number(temp.item.style.zIndex) + newsItems.length) + "";
                        temp.reset = false;
                    }
                    temp.coordinate -= width;
                }
                break;
            case 2:
                if (temp.coordinate <= -(width * 3)) {
                    temp.coordinate = 0;
                    temp.reset = true;
                }else{
                    if(temp.reset) {
                        temp.reset = false;
                        temp.item.style.zIndex = (new Number(temp.item.style.zIndex) + newsItems.length) + "";
                    }
                    temp.coordinate -= width;
                }
                break;
            case 3:
                if (temp.coordinate <= -(width * 4)) {
                    temp.coordinate = -width;
                    temp.reset = true;
                }else{
                    if (temp.reset) {
                        temp.reset = false;
                        temp.item.style.zIndex = (new Number(temp.item.style.zIndex) + newsItems.length) + "";
                    }
                    temp.coordinate -= width;
                }
                break;
            case 4:
                if (temp.coordinate <= -(width * 5)) {
                    temp.coordinate = -(width * 2);
                    temp.reset = true;
                }else{
                    if (temp.reset) {
                        temp.reset = false;
                        temp.item.style.zIndex = (new Number(temp.item.style.zIndex) + newsItems.length) + "";
                    }
                    temp.coordinate -= width;
                }
                break;
        }
    }

    setTimeout(function () {
        newsInterval = setInterval(newsScroll, 3000);
    }, 3000);
}

let isReviewsPanelOpen = false;

function handleOpenReviewsPanel() {
    isReviewsPanelOpen = true;
    let reviews = document.getElementById("reviews_panel");
    reviews.style.width = "100%";
    reviews.style.height = document.documentElement.clientHeight + "px";
}

function handleCloseReviewsPanel() {
    isReviewsPanelOpen = false;
    let reviews = document.getElementById("reviews_panel");
    reviews.style.width = "0px";
    reviews.style.height = "0px";
}

let isSearchPanelOpen = false;

function handleOpenSearchPanel() {
    isSearchPanelOpen = true;
    let diamonds = document.getElementById("diamonds");
    if(!diamonds) console.log("没有找到id为diamonds的元素!");
    diamonds.style.overflow = "hidden";
    diamonds.style.height = (document.documentElement.clientHeight -10) + "px";
    let search = document.getElementById("search_panel");
    search.style.backgroundColor = "#fff";
    search.style.width = "100%";
    search.style.height = document.documentElement.clientHeight + "px";
}

function handleCloseSearchPanel() {
    isSearchPanelOpen = false;
    let diamonds = document.getElementById("diamonds");
    diamonds.style.overflow = "inherit";
    diamonds.style.height = "auto";
    let search = document.getElementById("search_panel");
    search.style.backgroundColor = "transparent";
    search.style.width = "0px";
    search.style.height = "0px";
}

window.onResizeFuntionList.push(function () {
    if(newsInterval){
        clearInterval(newsInterval) ;
        if(newsItems && newsItems.length > 0){
            let width = window.getComputedStyle(document.getElementById("news")).width;
            width = new Number(width.substr(0, width.indexOf("px")));
            for(let i in newsItems){
                newsItems[i].item.style.transition = "none";
                newsItems[i].item.style.zIndex = i + "";
                newsItems[i].item.style.left = "0px";
                newsItems[i].item.style.transition = "left 300ms";
                newsItems[i].coordinate = -width;
                newsItems[i].reset = false;
            }
        }
        newsInterval = setInterval(newsScroll,3000);
    }

    if(isSearchPanelOpen) {
        let diamonds = document.getElementById("diamonds");
        diamonds.style.height = (document.documentElement.clientHeight -10) + "px";
        let search = document.getElementById("search_panel");
        search.style.height = document.documentElement.clientHeight + "px";
    }

    if (isReviewsPanelOpen){
        let reviews = document.getElementById("reviews_panel");
        reviews.style.height = document.documentElement.clientHeight + "px";
    }
});
